<template>
	<view class="bigbox">
		<!-- 含账号、姓名、手机号、邮箱、密码和确认密码 -->
		<view class="title">Hi,欢迎进入车主App</view>
		<view class="lists">
			<view class="ipt-container">
				<view class="ipt-lable">
					<image src="../../static/logo.png" mode="" class="icon"></image>
					<view>账号</view>
				</view>
				<input type="text" value="" placeholder="" v-model="account" @input="onFilterAccount" />
			</view>
			<view class="ipt-container">
				<view class="ipt-lable">
					<image src="../../static/logo.png" mode="" class="icon"></image>
					<view>姓名</view>
				</view>
				<input type="text" value="" placeholder="" v-model="name" maxlength="12" @input="onFilterName" />
			</view>
			<view class="ipt-container">
				<view class="ipt-lable">
					<image src="../../static/logo.png" mode="" class="icon"></image>
					<view>手机号</view>
				</view>
				<input type="text" value="" placeholder="" v-model="pho" maxlength="11" />
			</view>
			<view class="ipt-container">
				<view class="ipt-lable">
					<image src="../../static/logo.png" mode="" class="icon"></image>
					<view>邮箱</view>
				</view>
				<input type="text" value="" placeholder="" v-model="email" />
			</view>
			<view class="ipt-container">
				<view class="ipt-lable">
					<image src="../../static/logo.png" mode="" class="icon"></image>
					<view>密码</view>
				</view>
				<input type="text" value="" placeholder="" v-model="pwd" />
			</view>
			<view class="ipt-container">
				<view class="ipt-lable">
					<image src="../../static/logo.png" mode="" class="icon"></image>
					<view>确认密码</view>
				</view>
				<input type="text" value="" placeholder="" v-model="confPwd" />
			</view>
		</view>
		<button type="primary" @click="onSub()">注册</button>
	</view>
</template>

<script>
	function checkIsNull(val, text) {
		if (!val) {
			uni.showToast({
				title: `${text}不能为空`,
				icon: "error"
			})
			return true
		}
	}
	export default {
		data() {
			return {
				account: '',
				name: '',
				pho: '',
				email: '',
				pwd: '',
				confPwd: ''
			}
		},
		methods: {
			// 各输入项不能为空，且满足如下校验规则：账号只能输入字母
			// 或数字；姓名只能输入字母或数字，输入不能超过12位；手机号必须
			// 合法(13/15/17/18开头的11位手机号); 邮箱必须合法（例如
			// xx@xx.xx）；密码为6-10位，且只能输入字母或数字；确认密码输入
			// 内容需要和密码一致
			onSub() {
				if (checkIsNull(this.account, "账号")) return;
				if (checkIsNull(this.name, "姓名")) return;
				if (checkIsNull(this.pho, "手机号")) return;
				if (checkIsNull(this.email, "邮箱")) return;
				if (checkIsNull(this.pwd, "密码")) return;
				if (checkIsNull(this.confPwd, "确认密码")) return;

				if (!(/1(3|5|7|8)\d{9}/g).test(this.pho)) {
					return uni.showToast({
						title: `非法的手机号`,
						icon: "error"
					})
				}
				if (!(/^\w+@\w+\.\w+$/g).test(this.email)) {
					return uni.showToast({
						title: `非法的邮箱`,
						icon: "error"
					})
				}
				if (this.pwd < 6 || this.pwd > 10) {
					return uni.showToast({
						title: `密码必须为6-11位`,
						icon: "error"
					})
				}
				if (!(this.pwd == this.confPwd)) {
					return uni.showToast({
						title: `两次输入的密码不一致`,
						icon: "error"
					})
				}

				uni.navigateBack({

				})

			},
			onFilterAccount(e) {
				const v = e.detail.value;
				const f = v.replace(/[^a-zA-Z0-9]/g, '')
				this.account = v
				this.$nextTick(function() {
					this.account = f
				})
			},
			onFilterName(e) {
				const v = e.detail.value;
				const f = v.replace(/[^a-zA-Z0-9]/g, '')
				this.name = v
				this.$nextTick(function() {
					this.name = f
				})
			}

		}
	}
</script>


<style>
	page {
		background: linear-gradient(#e6f2ff, white);
		;
	}

	.bigbox {
		padding: 100rpx 40rpx;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		text-align: left;
		margin-bottom: 40rpx;
	}
	.lists{
		padding: 20rpx;
	}
	.ipt-container {
		margin-bottom: 40rpx;
	}
	input{
		border-bottom: 1rpx solid #dadada;
	}
	.ipt-lable{
		display: flex;
		justify-content: flex-start;
		line-height:50rpx;
		height: 50rpx;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}
	.icon {
		height: 50rpx;
		width: 50rpx;
	}
	button{
		border-radius: 42rpx;
	}
</style>
